<template>
  <!-- 横幅提示 -->
  <uni-popup ref="messageRef" type="message">
    <view v-if="props.safeHeight" class="top-box"></view>
    <uni-popup-message :type="msgType" :message="messageText" :duration="msgduration"></uni-popup-message>
  </uni-popup>
</template>

<script setup name="topNotification">
import { ref } from "vue";

const props = defineProps({
  safeHeight: {
    type: Boolean,
    default: true,
  },
});

//提示弹窗实例
const messageRef = ref();

// 提示类型
const msgType = ref("info");
const messageText = ref("");
const msgduration = ref(3000);

// 弹窗提示
const sendPopupTip = ({ type, message, duration }) => {
  msgType.value = type;
  messageText.value = message;
  msgduration.value = duration;
  messageRef.value.open();
};

defineExpose({ sendPopupTip });
</script>

<style lang="scss" scoped>
.top-box {
  height: var(--status-bar-height);
}
</style>
